<template>
	<view class="con">
		<view class="flex-ju-b " :style="{paddingTop:shh+5+'px'}">
			<uni-icons @click="back()" type="left" size="22" color="#000"></uni-icons>
			<view class="flex-a-i">
				<image @click="navto('/pages/search')" mode="widthFix" class="flex image width40" src="/static/sou.png"></image>
				<view @click="navto('settings?type=2')" class="flex-a-i size24 borderECEDEE color666 ml30 ra20 pg5-20">
					设置
				</view>
			</view>
			<view></view>
		</view>
				
				<view class=" mt20" >
					<swiper @change="swchange" class="swiperc">
						<swiper-item v-for="(item,index) in info.reviewRootDto" :key="index">
						<scroll-view scroll-y class="swiperccc bgfff ra50" >
						<view v-if="info.reviewRootDto.length" @click="tapdisplay" class=" pg30 swipers" >
								<view class="flex-ju-b ">
									<view>剩余{{item.rootCount}}</view>
									<view class="flex-a-i"></view>
								</view>
								<view @click.stop="voice(item.pronounce)" class="flex-ju-c size72 bold mt50">{{item.root}}
									<image mode="widthFix" class="flex image width40 ml15 mt25" src="/static/yuyin.png"></image>
								</view>
								<view v-if="info.isCard" class="flex-ju-c mt30">
									<image  class="flex image wh600-450 ra20" :src="item.card"></image>
								</view>
								<view v-else class="width600 mt80 ">
									<view class="flex-ju-c size24 mt30 color666">
										尝试回想释义 
									</view>
									<view class="flex-ju-c size24  color666">
										点击空白处查看词根图片
									</view>
								</view>
								
								<template v-if="info.isCard||info.isSeriesWord">
									<view v-if="info.isSeriesWord" class="flex-ju-c flex-wrap">
										<view v-for="(item,k) in item.words" :key="k" class="size48 bold flex-ju-c mt30 mr30">
											"{{item}}"
										</view>
									</view>
									<view v-else class="width600 mt30 size28">
										<view class="flex-ju-c size24 mt30 color666">
											仍未想起
										</view>
										<view class="flex-ju-c size24  color666">
											点击空白处查看系列词
										</view>
									</view>
								</template>
								
						</view>
						<view v-else class="flex-ju-c bgf9f9f9">已复习完成</view>
						</scroll-view> 
						</swiper-item>
						</swiper>
						<!-- <view v-if="info" class="flex-ju-b width1000 mt30 " :style="{paddingBottom:bhh+'px'}">
							<view @click="tapdisplay" class="wh240-120 ra120 colorfff flex-ju-c bgFD2F55">不认识</view>
							<view @click="behead" class="wh130-130 ra130 flex-ju-c bgfff">
								<image mode="widthFix" class="flex image width36" src="/static/zan.png"></image>
							</view>
							<view @click="toknow" class="wh240-120 ra120 colorfff flex-ju-c bg000">认识</view>
						</view> -->
						
						<view v-if="info" class="flex-ju-b width92vw posiab bottom0 bot mt30" :style="{paddingBottom:bhh+'px'}">
							<view @click="tapdisplay" class="wh240-120 ra20 colorfff flex-ju-c size40 bg000">不认识</view>
							<view @click="behead" class="wh130-130 ra130 flex-ju-c bgfff">
								<image mode="widthFix" class="flex image width130" src="/static/zan.png"></image>
							</view>
							<view @click="toknow" class="wh240-120 ra20 colorfff flex-ju-c size40 bgFD2F55">认识</view>
						</view>
						
					</view>
				
			
			<!-- <uni-popup ref="cang" type="bottom" background-color="#fff" border-radius="20px 20px 0px 0" >
				<view class="con size28">
					<view class="flex-ju-c border-bECEDEE height100">隐藏讲解</view>
					<view class="flex-ju-c border-bECEDEE height100">隐藏单词</view>
					<view class="flex-ju-c border-bECEDEE height100">完整显示</view>
					<view @click="$refs.cang.close()" class="flex-ju-c border-bECEDEE height100 color666">取消</view>
				</view>
			</uni-popup> -->
			
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				startX:"",
				endX:"",
				endX:"",
				current:0,
				isCard: 0,
				isSentence: 0,
				isSeriesWord: 0
			}
		},
		onLoad() {
			this.getinfo()
		},
		mounted() {
			
		},
		methods: {
			
			toknow(){
				uni.navigateTo({
					url:"root_detail?id="+this.info.reviewRootDto[this.current].rootId
				})
			},
			handleTouchStart(event) {
			      // 记录触摸开始的X坐标
			      this.startX = event.touches[0].clientX;
			    },
			    handleTouchEnd(event) {
			      // 记录触摸结束的X坐标
			      this.endX = event.changedTouches[0].clientX;
			      this.detectSwipe();
			    },
			    detectSwipe() {
			      const diffX = this.endX - this.startX;
			      const threshold = 50; // 滑动判定阈值
			
			      if (Math.abs(diffX) < threshold) {
			        // 滑动距离不足，不判定为有效滑动
			        // this.swipeDirection = '未检测到有效滑动';
			        return;
			      }
			
			      if (diffX > 0) {
			        // this.swipeDirection = '右滑';
			        this.onSwipeRight(); // 触发右滑回调
			      } else {
			        // this.swipeDirection = '左滑';
			        this.onSwipeLeft();  // 触发左滑回调
			      }
			    },
			    onSwipeLeft() {
			      // 左滑后的处理逻辑，例如切换至下一题:ml-citation{ref="3" data="citationList"}
			    
				  this.noknow()
			      console.log('检测到左滑手势');
			    },
			    onSwipeRight() {
			      // 右滑后的处理逻辑，例如切换至上一题:ml-citation{ref="3" data="citationList"} 或返回上一页:ml-citation{ref="2" data="citationList"}
			     
				  this.know()
			      console.log('检测到右滑手势');
			    },
			getinfo(){
				this.http('/api/review/reviewInfo',{
					reviewType:2
				},'post').then(res=>{
					this.isCard = res.data.isCard
					this.isSentence = res.data.isSentence
					this.isSeriesWord = res.data.isSeriesWord
					this.info=res.data
					if(!res.data){
						uni.redirectTo({
							url:"fuxisuu"
						})
					}
				})
			},
			swchange(e){
				this.current = e.detail.current
				if (this.isCard) {
					this.info.isCard = 1
				} else {
					this.info.isCard = 0
				}
				
				if (this.isSeriesWord) {
					this.info.isSeriesWord = 1
				} else {
					this.info.isSeriesWord = 0
				}
			},
			tapdisplay(){
				if(this.info.isCard&&this.info.isSeriesWord){
					uni.navigateTo({
						url:"root_detail?id="+this.info.reviewRootDto[this.current].rootId
					})
					return
				}
				if(this.info.isCard){
					this.info.isSeriesWord=1
				}else{
					this.info.isCard=1
				}
			},
			adduserReview(reviewStatus){
				this.http('/api/userReview/add',{
					entryId:this.info.reviewRootDto[this.current].rootId,
					reviewType:2,
					reviewStatus
				},'post').then(res=>{
					this.getinfo()
				})
			},
			noknow(){
				this.adduserReview(3)
			},
			know(){
				this.adduserReview(1)
			},
			behead(){
				this.adduserReview(2)
			},
		}
	} 
</script>

<style>
	/* .swiperc{
		height:calc(100vh - 80rpx);
	}
	.swipercc{
		height:calc(100vh - 100rpx);
	}
	
	.swipers{
		 
		height:calc(100vh - 360rpx);
	}
page{
	background: #f9f9f9;
} */

	.swiperc{
		height:calc(100vh - 150rpx);
	}
	
	.swipers{
		/* width: 80vw; */
		height:calc(100vh - 380rpx);
	}
		page{
			background: #f9f9f9;
		}
</style>
